<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- <script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script> -->
    <title>Document</title>
  </head>

  <body>
    <canvas id="c" width="400" height="300"></canvas>

    <script id="vertex-shader-2d" type="x-shader/x-vertex">
      attribute vec4 a_position;
      uniform vec2 u_resolution;

      void main(){
        vec2 position = a_position.xy / u_resolution;

        gl_Position = vec4(position.xy,0,1);
      }
    </script>
    <script id="fregmetn-shader-2d" type="x-shader/x-fragment">
      precision mediump float;

      void main(){
        gl_FragColor = vec4(1, 0, 0.5, 1);
      }
    </script>

    <script>
      window.onload = function () {
        const gl = document.querySelector('#c').getContext('webgl')

        if (!gl) return

        const vertexShaderSource =
          document.querySelector('#vertex-shader-2d').text
        const fragmentShaderSource = document.querySelector(
          '#fregmetn-shader-2d'
        ).text

        // 创建着色器对象
        function createShader(gl, type, shaderSource) {
          const shader = gl.createShader(type) // create
          gl.shaderSource(shader, shaderSource) // Send the source to the shader object

          // Compile the shader program
          gl.compileShader(shader)

          if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
            console.log(
              'An error occurred compiling the shaders: ' +
                gl.getShaderInfoLog(shader)
            )
            gl.deleteShader(shader)
            return null
          }

          return shader
        }
        const vertexShader = createShader(
          gl,
          gl.VERTEX_SHADER,
          vertexShaderSource
        )
        const fragmentShader = createShader(
          gl,
          gl.FRAGMENT_SHADER,
          fragmentShaderSource
        )

        // 创建着色器程序
        function createShareProgram(gl, vertexShader, fragmentShader) {
          // 创建着色器程序
          const shaderProgram = gl.createProgram()
          gl.attachShader(shaderProgram, vertexShader)
          gl.attachShader(shaderProgram, fragmentShader)
          gl.linkProgram(shaderProgram)
          // 创建着色器程序 创建状态检测
          if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
            alert(
              'Unable to initialize the shader program: ' +
                gl.getProgramInfoLog(shaderProgram)
            )
            return null
          }

          return shaderProgram
        }
        const shaderProgram = createShareProgram(
          gl,
          vertexShader,
          fragmentShader
        )

        var positionBuffer = gl.createBuffer()
        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer)

        var positions = [0, 0, 0, 200, 200, 0]
        gl.bufferData(
          gl.ARRAY_BUFFER,
          new Float32Array(positions),
          gl.STATIC_DRAW
        )

        // Tell WebGL how to convert from clip space to pixels
        gl.viewport(0, 0, gl.canvas.width, gl.canvas.height)

        // Clear the canvas
        gl.clearColor(0, 0, 0, 0)
        gl.clear(gl.COLOR_BUFFER_BIT)

        // 🌟 Tell it to use our program (pair of shaders)
        gl.useProgram(shaderProgram)

        // look up where the vertex data needs to go.
        var positionAttributeLocation = gl.getAttribLocation(
          shaderProgram,
          'a_position'
        )
        // uniform u_resolution
        const resolutionUniformLocation = gl.getUniformLocation(
          shaderProgram,
          'u_resolution'
        )

        gl.uniform2f(
          resolutionUniformLocation,
          gl.canvas.width,
          gl.canvas.height
        )

        // Turn on the attribute
        gl.enableVertexAttribArray(positionAttributeLocation)

        // Bind the position buffer.
        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer)

        // Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER)
        var size = 2 // 2 components per iteration
        var type = gl.FLOAT // the data is 32bit floats
        var normalize = false // don't normalize the data
        var stride = 0 // 0 = move forward size * sizeof(type) each iteration to get the next position
        var offset = 0 // start at the beginning of the buffer
        gl.vertexAttribPointer(
          positionAttributeLocation,
          size,
          type,
          normalize,
          stride,
          offset
        )

        // draw
        var primitiveType = gl.TRIANGLES
        var offset = 0
        var count = 3
        gl.drawArrays(primitiveType, offset, count)
      }
    </script>
  </body>
</html>
